<template>
  <div class="dashboard-container home">
  <el-row :gutter="20">
   <el-col :xs="24" :sm="24" :md="12" :lg="14">
    <div title="欢迎页面" style="padding: 50px; overflow: hidden; color: #409eff;font: lighter 16px 'Lucida Sans Unicode';"
         data-options="iconCls:'icon-heart',plain:true">
        <b style="font-size: 36px; line-height: 30px; height: 30px;">书中自有颜如玉，书中自有黄金屋</b><br>
        <p>Ygabc图书管理系统</p>
        <p>开发人员: ygabc</p>
        <p>开发周期: 2022/6/13 —— 2022/6/22</p>
        <p>开发脚手架：若依</p>
        <p>前端技术: HTML+CSS+JavaScript+Vue+Axios+ElementUI</p>
        <p>后端技术: Java+SpringBoot+MyBatis+MySQL</p>
        <el-divider />
        <p>系统简介</p>
         <p>图书管理系统是对书籍的借阅及读者信息进行统一管理的系统，具体包括一下功能：</p> 
         <p>1.图书信息管理、图书类别管理、借阅信息管理</p>
         <p>2.读者查看图书信息，借阅以及归还图书</p>
        <p>大家要记得还书哦~</p>
     </div>
    </el-col>
 
    <el-divider />

    <el-col :xs="24" :sm="24" :md="12" :lg="8">
      <el-card  shadow="hover" class="notice-card">
        <!--
        <div slot="header" class="clearfix">
          <span>通知公告</span>
        </div>
        -->
          <el-table :header-cell-style="{}" v-loading="loading" :data="noticeList" @selection-change="handleSelectionChange">

      <el-table-column  width="10" align="center" />
      <!--
      <el-table-column label="序号" align="center" prop="noticeId" width="100" />
      -->
      <el-table-column
        label="通知公告"
        align="center"
        prop="noticeTitle"
        :show-overflow-tooltip="true"
      />
    </el-table>
        </el-card>
      </el-col>
      </el-row>

    
  </div>
</template>

<script>
import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
import { METHODS } from 'http'
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
    data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 公告表格数据
      noticeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        noticeTitle: undefined,
        createBy: undefined,
        status: undefined
      },
    };
  },
  computed: {
    ...mapGetters([
      'id',
      'name',
      'roles'
    ])
  },

  created() {
    this.getList();
  },
  methods:{
    notice(selection){
      this.ids=selection.map(item => item.id)
      this.single=selection.length !== 1
      this.multiple = !selection.length
    },
    getList() {
      this.loading = true;
      listNotice(this.queryParams).then(response => {
        this.noticeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    }
  }
}
</script>

<style scoped lang="scss">
.home{
    .notice-card {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
